<template>
	<view class="container">
		<view class="header">
			<text class="title">注册账号</text>
			<text class="subtitle">欢迎加入校园跑腿</text>
		</view>
		
		<view class="form">
			<view class="form-item">
				<uni-icons type="phone" size="20" color="#999"></uni-icons>
				<input type="number" v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
			</view>
			<view class="form-item">
				<uni-icons type="locked" size="20" color="#999"></uni-icons>
				<input type="number" v-model="form.code" placeholder="请输入验证码" maxlength="6" />
				<text class="code-btn" :class="{ disabled: counting }" @tap="getCode">
					{{ counting ? count + 's后重试' : '获取验证码' }}
				</text>
			</view>
			<view class="form-item">
				<uni-icons type="locked" size="20" color="#999"></uni-icons>
				<input type="password" v-model="form.password" placeholder="请设置密码" />
			</view>
			<view class="form-item">
				<uni-icons type="locked" size="20" color="#999"></uni-icons>
				<input type="password" v-model="form.confirmPassword" placeholder="请确认密码" />
			</view>
		</view>
		
		<view class="agreement">
			<checkbox-group @change="onAgreementChange">
				<label>
					<checkbox :checked="form.agreement" color="#2979ff" />
					<text>我已阅读并同意</text>
					<text class="link" @tap="showAgreement">《用户服务协议》</text>
					<text>和</text>
					<text class="link" @tap="showPrivacy">《隐私政策》</text>
				</label>
			</checkbox-group>
		</view>
		
		<view class="submit-btn" :class="{ disabled: !canSubmit }" @tap="register">
			注册
		</view>
		
		<view class="login-link" @tap="goToLogin">
			已有账号？立即登录
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				phone: '',
				code: '',
				password: '',
				confirmPassword: '',
				agreement: false
			},
			counting: false,
			count: 60
		}
	},
	computed: {
		canSubmit() {
			return this.form.phone && 
				this.form.code && 
				this.form.password && 
				this.form.confirmPassword && 
				this.form.agreement
		}
	},
	methods: {
		getCode() {
			if (this.counting) return
			if (!this.form.phone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}
			if (!/^1\\d{10}$/.test(this.form.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			// TODO: 调用后端API发送验证码
			this.counting = true
			this.count = 60
			const timer = setInterval(() => {
				this.count--
				if (this.count === 0) {
					clearInterval(timer)
					this.counting = false
				}
			}, 1000)
		},
		onAgreementChange(e) {
			this.form.agreement = e.detail.value.length > 0
		},
		showAgreement() {
			uni.navigateTo({
				url: '/pages/agreement/service'
			})
		},
		showPrivacy() {
			uni.navigateTo({
				url: '/pages/agreement/privacy'
			})
		},
		register() {
			if (!this.canSubmit) return
			
			if (this.form.password !== this.form.confirmPassword) {
				uni.showToast({
					title: '两次输入的密码不一致',
					icon: 'none'
				})
				return
			}
			
			uni.showLoading({
				title: '注册中...'
			})
			
			// TODO: 调用后端API注册
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}, 1000)
		},
		goToLogin() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #fff;
	padding: 60rpx 40rpx;
}

.header {
	margin-bottom: 80rpx;
	
	.title {
		font-size: 48rpx;
		color: $text-color;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: $text-color-grey;
	}
}

.form {
	.form-item {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-bottom: 1rpx solid $border-color;
		margin-bottom: 20rpx;
		
		input {
			flex: 1;
			font-size: 28rpx;
			margin-left: 20rpx;
		}
		
		.code-btn {
			font-size: 28rpx;
			color: #2979ff;
			padding-left: 20rpx;
			
			&.disabled {
				color: $text-color-grey;
			}
		}
	}
}

.agreement {
	margin: 40rpx 0;
	
	label {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		
		text {
			font-size: 24rpx;
			color: $text-color-grey;
			margin-left: 10rpx;
			
			&.link {
				color: #2979ff;
			}
		}
	}
}

.submit-btn {
	height: 90rpx;
	background-color: #2979ff;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: bold;
	border-radius: 45rpx;
	
	&.disabled {
		opacity: 0.5;
	}
}

.login-link {
	text-align: center;
	margin-top: 40rpx;
	font-size: 28rpx;
	color: #2979ff;
}
</style> 